<template>
    <el-card>
        <div class="flex items-center justify-between">
            <div class="text-14px bold flex-no-shrink">{{ title }}</div>
            <div>
                <template v-if="selectOneline">
                    <el-select v-if="showCompany" v-model="sltInsureCompanyValue" class="!w-90px mr-10px" size="small"
                        @change="handleChange">
                        <el-option v-for="(item, index) in options1" :key="item.insurCompany" :label="item.name"
                            :value="item.insurCompany"></el-option>
                    </el-select>
                    <el-select v-if="showType" v-model="sltTypeValue" class="!w-90px mg-r-10" size="small"
                        @change="handleChange">
                        <el-option v-for="(item, index) in options2" :key="item.method" :label="item.insuranceMethod"
                            :value="item.method"></el-option>
                    </el-select>
                    <el-select v-if="showPlan" v-model="sltPlanValue" class="!w-90px mg-r-10" size="small"
                        @change="handleChange">
                        <el-option v-for="(item, index) in options3" :key="item.insurCompanyPlanCode"
                            :label="item.insurCompanyPlanName" :value="item.insurCompanyPlanCode"></el-option>
                    </el-select>
                </template>

                <customSelectDate :date-value="1" v-model:value-list="dateList" />
            </div>
        </div>
        <div v-if="!selectOneline" class="flex gap-16px mt-16px">
            <el-select v-if="showCompany" v-model="sltInsureCompanyValue" class="!w-90px" size="small"
                @change="handleChange">
                <el-option v-for="(item, index) in options1" :key="item.insurCompany" :label="item.name"
                    :value="item.insurCompany"></el-option>
            </el-select>
            <el-select v-if="showType" v-model="sltTypeValue" class="!w-90px" size="small" @change="handleChange">
                <el-option v-for="(item, index) in options2" :key="item.method" :label="item.insuranceMethod"
                    :value="item.method"></el-option>
            </el-select>
            <el-select v-if="showPlan" v-model="sltPlanValue" class="!w-90px" size="small" @change="handleChange">
                <el-option v-for="(item, index) in options3" :key="item.insurCompanyPlanCode"
                    :label="item.insurCompanyPlanName" :value="item.insurCompanyPlanCode"></el-option>
            </el-select>
        </div>
        <div class="flex mt-20px gap-16px" :class="{ 'flex-wrap': layout !== 'short' }">
            <template v-for="(i, index) in list" :key="index">
                <div class="flex-item flex flex-jc-sb flex-ai-end"
                    :class="{ 'full-item': (type === 'fullStart' && index === 0) || (type === 'fullEnd' && index === list.length - 1) || type === 'full' }">
                    <div>
                        <div class="text-14px fc-lightgrey flex items-center">
                            <span class="mg-r-5">{{ i.name }}</span>
                            <el-tooltip v-if="i.hint" class="box-item" effect="dark" :content="i.hint" placement="top">
                                <el-icon>
                                    <QuestionFilled />
                                </el-icon>
                            </el-tooltip>
                        </div>
                        <div class="mt-10px flex items-center">
                            <CountUp class="text-24px bold fm-din-bold" :decimalPlaces="i.decimal || 0"
                                :end-val="i.value" />
                            <span class="fs-12 mg-l-5 mg-t--5 lh-24">{{ i.suffix }}</span>
                        </div>
                    </div>
                    <div>
                        <IconChartBar1 v-if="i.icon === 'bar1'" />
                        <IconChartBar2 v-if="i.icon === 'bar2'" />
                        <IconChartBar3 v-if="i.icon === 'bar3'" />
                        <IconChartBar4 v-if="i.icon === 'bar4'" />
                        <IconChartBar5 v-if="i.icon === 'bar5'" />
                    </div>
                </div>
            </template>
        </div>
    </el-card>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue'
import { getInsuranceCompanyList, getInsuranceTypeList, getInsurancePlanList, getInsuranceCompanyListDay, getInsurancePlanListDay, getInsurancePlanListGroup } from '@/api/clients/signClient.ts'
import wnumb from 'wnumb'
import CountUp from 'vue-countup-v3'
import { getInsuranceCompany } from '@/api/dashboard/longTerm.ts'

import { getInsureCompany, getWesurePlanName, getTyPlanName } from '@/api/dashboard/weinsure.ts'

const format = wnumb({
    thousand: ',',
    decimals: 2,
})
const props = defineProps({
    title: {
        type: String,
        default: '保险数据'
    },
    list: {
        type: Array
    },
    type: {
        type: String,
        default: ''
    },
    selectOneline: {
        type: Boolean,
        default: false
    },
    layout: {
        type: String,
        default: ''
    },
    dateValue: {
        type: Array
    },
    selectInsureCompanyValue: {
        type: [String, Number]
    },
    selectTypeValue: {
        type: [String, Number]
    },
    selectPlanValue: {
        type: [String, Number]
    },
    companyId: {
        type: [String, Number]
    },
    showCompany: {
        type: Boolean,
        default: false
    },
    showType: {
        type: Boolean,
        default: false
    },
    showPlan: {
        type: Boolean,
        default: false
    },
    insureType: {
        type: String,
        default: ''
    }
})

const emits = defineEmits(['update:dateValue', 'update:selectInsureCompanyValue', 'update:selectTypeValue', 'update:selectPlanValue', 'change'])

const dateList = ref([])

const sltInsureCompanyValue = ref('')
const options1 = ref([])

const sltTypeValue = ref('')
const options2 = ref([])

const sltPlanValue = ref('')
const options3 = ref([])

const emitsData = () => {
    emits('update:dateValue', dateList.value)
    emits('update:selectInsureCompanyValue', sltInsureCompanyValue.value)
    emits('update:selectTypeValue', sltTypeValue.value)
    emits('update:selectPlanValue', sltPlanValue.value)
    emits('change')
}

const handleChange = () => {
    emitsData()
}

const getInsuranceCompanyOptions = () => {
    console.log(props.insureType, 'props.insureType')
    if (options1.value?.length) return
    if (props.insureType === 'long') {
        getInsuranceCompanyList({
            companyId: props.companyId
        }).then(res => {
            options1.value = res
            options1.value.unshift({
                name: '全部保司',
                insurCompany: ''
            })
        })
    } else if (props.insureType === 'day') {
        getInsuranceCompanyListDay({
            type: 1
        }).then(res => {
            console.log(res, 'sghdhu')
            options1.value = res
            options1.value.unshift({
                name: '全部保司',
                insurCompany: ''
            })
        })
    } else if (props.insureType === 'group') {
        getInsuranceCompanyListDay({
            type: 3
        }).then(res => {
            options1.value = res
            options1.value.unshift({
                name: '全部保司',
                insurCompany: ''
            })
        })
    } else if (props.insureType === 'dashboardLong') {
        getInsuranceCompany({}).then(res => {
            options1.value = res
            options1.value.unshift({
                name: '全部保司',
                insurCompany: ''
            })
        })
    } else if (props.insureType === 'dashboardDay' || props.insureType === 'dashboardGroup') {
        const map = {
            dashboardDay: 1,
            dashboardGroup: 3
        }
        getInsureCompany({
            type: map[props.insureType]
        }).then(res => {
            options1.value = res.filter(i => i !== null)
            options1.value.unshift({
                name: '全部保司',
                insurCompany: ''
            })
        })
    }
}

const getTypeOptions = () => {
    if (props.insureType === 'dashboardEleSign') return
    if (options2.value?.length) return
    getInsuranceTypeList({
        companyId: props.companyId
    }).then(res => {
        // options2.value = res
        res.forEach(i => {
            options2.value.push({
                insuranceMethod: i.dictLabel,
                method: i.dictValue
            })
        })
        options2.value.unshift({
            insuranceMethod: '全部方式',
            method: ''
        })
    })
}

const getPlanOptions = () => {
    if (options3.value?.length) return
    if (props.insureType === 'long' || props.insureType === 'dashboardLong') {
        getInsurancePlanList({
            companyId: props.companyId || ''
        }).then(res => {
            options3.value = res
            options3.value.unshift({
                insurCompanyPlanName: '全部方案',
                insurCompanyPlanCode: ''
            })
        })
    } else if (props.insureType === 'day') {
        const query = {}
        getWesurePlanName(query).then(res => {
            options3.value = []
            res.forEach(i => {
                options3.value.push({
                    insurCompanyPlanName: i.dictLabel,
                    insurCompanyPlanCode: i.dictValue
                })
            })
            options3.value.unshift({
                insurCompanyPlanName: '全部方案',
                insurCompanyPlanCode: ''
            })
        })
    } else if (props.insureType === 'group') {
        getInsurancePlanListGroup({
            companyId: props.companyId
        }).then(res => {
            options3.value = res
            options3.value.forEach(i => {
                i.insurCompanyPlanName = i.wesurePlanName
                i.insurCompanyPlanCode = i.wesurePlanName
            })
            options3.value.unshift({
                insurCompanyPlanName: '全部方案',
                insurCompanyPlanCode: ''
            })
        })
    } else if (props.insureType === 'dashboardDay') {
        const query = {}
        if (props.insureType === 'dashboardGroup') {
            query.insureCompanyType = 'insure_type_tyrb'
        }
        getWesurePlanName(query).then(res => {
            options3.value = []
            res.forEach(i => {
                options3.value.push({
                    insurCompanyPlanName: i.dictLabel,
                    insurCompanyPlanCode: i.dictValue
                })
            })
            options3.value.unshift({
                insurCompanyPlanName: '全部方案',
                insurCompanyPlanCode: ''
            })
        })
    } else if (props.insureType === 'dashboardGroup') {
        getTyPlanName({
            insureCompanyType: 'insure_type_tyrb'
        }).then(res => {
            options3.value = []
            res.forEach(i => {
                options3.value.push({
                    insurCompanyPlanName: i.wesurePlanName,
                    insurCompanyPlanCode: i.wesurePlanCode
                })
            })
            options3.value.unshift({
                insurCompanyPlanName: '全部方案',
                insurCompanyPlanCode: ''
            })
            console.log(3456, res)
        })
    }
}

watch(() => props.dateValue, (newval) => {
    dateList.value = newval
}, {
    immediate: true
})

watch(() => props.selectInsureCompanyValue, (newval) => {
    sltInsureCompanyValue.value = newval
}, {
    immediate: true
})

watch(() => props.selectTypeValue, (newval) => {
    sltTypeValue.value = newval
}, {
    immediate: true
})

watch(() => props.selectPlanValue, (newval) => {
    sltPlanValue.value = newval
}, {
    immediate: true
})

watch(() => props.companyId, (newval) => {
    if (newval) {
    } else {

    }
    getInsuranceCompanyOptions()
    getTypeOptions()
    getPlanOptions()
}, {
    immediate: true
})

watch(dateList, (newval) => {
    emitsData()
})
</script>
<style lang="scss" scoped>
.flex-item {
    background: #FAFAFC;
    border-radius: 5px;
    padding: 12px;
}

.title-through {
    position: relative;

    &::after {
        display: block;
        content: '';
        width: calc(100% - 70px);
        height: 1px;
        background: #F4F4F7;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.flex-item {
    background: #FAFAFC;
    border-radius: 10px;
    padding: 16px;
    flex-basis: calc(50% - 10px);
    box-sizing: border-box;
}

.full-item {
    flex-basis: 100%;
}

.mg-t--5 {
    margin-top: -5px;
}
</style>